<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Customer</title>
<link rel="stylesheet" href="Styles/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Styles/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Styles/invalid.css" type="text/css" media="screen" />
<link rel="stylesheet" href="Styles/manageUser.css" type="text/css" media="screen" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="Scripts/facebox.js"></script>
<script type="text/javascript" src="Scripts/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="Scripts/ui.core.js"></script>
<script type="text/javascript" src="Scripts/ui.checkbox.js"></script>
<script type="text/javascript" src="Scripts/jquery.bind.js"></script>
<script type="text/javascript">
	$(function(){
		$('#gridUser input').checkBox();		
		$('#toggle-all').click(function(){
			$('#toggle-all').toggleClass('toggle-checked');
			$('#product-table input[type=checkbox]').checkBox('toggle');
			return false;
		});
	});
</script>

<!--  styled select box script version 2 --> 
<script type="text/javascript" src="Scripts/jquery.selectbox-0.5.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" });
	});
</script>

</head>
<body>
	<div id="body-wrapper">
	  <!-- Wrapper for the radial gradient background -->
	  <div id="sidebar">
	    <div id="sidebar-wrapper">
	      <!-- Sidebar with logo and menu -->
	      <h1 id="sidebar-title"><a href="#">Simpla Admin</a></h1>
	      <!-- Logo (221px wide) -->
	      <a href="#"><img id="logo" src="TemplateImages/logo.png" alt="Simpla Admin logo" /></a>
	      <!-- Sidebar Profile links -->
	      <div id="profile-links"> Hello, <a href="#" title="Edit your profile">John Doe</a>, you have <a href="#messages" rel="modal" title="3 Messages">3 Messages</a><br />
	        <br />
	        <a href="#" title="View the Site">View the Site</a> | <a href="#" title="Sign Out">Sign Out</a> </div>
	      <ul id="main-nav">
	        <!-- Accordion Menu -->
	        <li> <a href="#" class="nav-top-item no-submenu">
	          <!-- Add the class "no-submenu" to menu items with no sub menu -->
	          Dashboard </a> </li>
	        <li> <a href="#" class="nav-top-item current">
	          <!-- Add the class "current" to current menu item -->
	          Categories </a>
	          <ul>
	            <li><a href="#"> Create a new Category </a></li>
	            <li><a class="current" href="#">Manage Categories</a></li>
	            <!-- Add class "current" to sub menu items also -->
	          </ul>
	        </li>
	        <li> <a href="#" class="nav-top-item"> Products </a>
	          <ul>
	            <li><a href="#"> Images</a></li>
	            <li><a href="#">Manage Galleries</a></li>
	            <li><a href="#">Manage Albums</a></li>
	            <li><a href="#">Gallery Settings</a></li>
	          </ul>
	        </li>
	        <li> <a href="#" class="nav-top-item"> Customers </a>
	          <ul>
	            <li><a href="#">Calendar Overview</a></li>
	            <li><a href="#">Add a new Event</a></li>
	            <li><a href="#">Calendar Settings</a></li>
	          </ul>
	        </li>
	        <li> <a href="#" class="nav-top-item"> Employees </a>
	          <ul>
	            <li><a href="#">Calendar Overview</a></li>
	            <li><a href="#">Add a new Event</a></li>
	            <li><a href="#">Calendar Settings</a></li>
	          </ul>
	        </li>
	        <li> <a href="#" class="nav-top-item"> Orders </a>
	          <ul>
	            <li><a href="#">Calendar Overview</a></li>
	            <li><a href="#">Add a new Event</a></li>
	            <li><a href="#">Calendar Settings</a></li>
	          </ul>
	        </li>
	        <li> <a href="#" class="nav-top-item"> Settings </a>
	          <ul>
	            <li><a href="#">General</a></li>
	            <li><a href="#">Design</a></li>
	            <li><a href="#">Your Profile</a></li>
	            <li><a href="#">Users and Permissions</a></li>
	          </ul>
	        </li>
	      </ul>
	      <!-- End #main-nav -->
	    </div>
	  </div>
	  <!-- End #sidebar -->
	  <div id="messages" style="display: none">
	    <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal"  -->
	    <h3>3 Messages</h3>
	    <p> <strong>17th May 2009</strong> by Admin<br />
	      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. <small><a href="#" class="remove-link" title="Remove message">Remove</a></small> </p>
	    <p> <strong>2nd May 2009</strong> by Jane Doe<br />
	      Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est. <small><a href="#" class="remove-link" title="Remove message">Remove</a></small> </p>
	    <p> <strong>25th April 2009</strong> by Admin<br />
	      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. <small><a href="#" class="remove-link" title="Remove message">Remove</a></small> </p>
	    <form action="#" method="post">
	      <h4>New Message</h4>
	      <fieldset>
	      <textarea class="textarea" name="textfield" cols="79" rows="5"></textarea>
	      </fieldset>
	      <fieldset>
	      <select name="dropdown" class="small-input">
	        <option value="option1">Send to...</option>
	        <option value="option2">Everyone</option>
	        <option value="option3">Admin</option>
	        <option value="option4">Jane Doe</option>
	      </select>
	      <input class="button" type="submit" value="Send" />
	      </fieldset>
	    </form>
	  </div>
	  <!-- End #messages -->
	  <div id="main-content">
	    <div id="message-yellow">
	      <table cellspacing="0" cellpadding="0" border="0" width="100%">
	        <tbody>
	          <tr>
	            <td class="yellow-left">You have a new message. <a href="">Go to Inbox.</a></td>
	            <td class="yellow-right"><a class="close-yellow"><img alt="" src="TemplateImages/icon_close_yellow.gif"></a></td>
	          </tr>
	        </tbody>
	      </table>
	    </div>
	    <div id="message-red">
	      <table cellspacing="0" cellpadding="0" border="0" width="100%">
	        <tbody>
	          <tr>
	            <td class="red-left">Error. <a href="">Please try again.</a></td>
	            <td class="red-right"><a class="close-red"><img alt="" src="TemplateImages/icon_close_red.gif"></a></td>
	          </tr>
	        </tbody>
	      </table>
	    </div>
	    <div id="message-blue">
	      <table cellspacing="0" cellpadding="0" border="0" width="100%">
	        <tbody>
	          <tr>
	            <td class="blue-left">Welcome back. <a href="">View my account.</a> </td>
	            <td class="blue-right"><a class="close-blue"><img alt="" src="TemplateImages/icon_close_blue.gif"></a></td>
	          </tr>
	        </tbody>
	      </table>
	    </div>
	    <div id="message-green">
	      <table cellspacing="0" cellpadding="0" border="0" width="100%">
	        <tbody>
	          <tr>
	            <td class="green-left">Product added sucessfully. <a href="">Add new one.</a></td>
	            <td class="green-right"><a class="close-green"><img alt="" src="TemplateImages/icon_close_green.gif"></a></td>
	          </tr>
	        </tbody>
	      </table>
	    </div>
	    <div style="background-color:#FFFFFF;overflow:hidden">
	      <table width="100%" cellpadding="0" cellspacing="0" border="0" id="gridUser">
	        <tr>
	          <th class="table-header-repeat line-left minwidth-1"><a href="">Username</a></th>
	          <th class="table-header-repeat line-left minwidth-1"><a href="">Email</a></th>
	          <th class="table-header-repeat line-left minwidth-1"><a href="">Fullname</a></th>
	          <th class="table-header-repeat line-left"><a href="">Gender</a></th>
	          <th class="table-header-repeat line-left minwidth-1"><a href="">Phone</a></th>
	          <th class="table-header-options line-left"><a href="">Options</a></th>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	        <tr>
	          <td>GeorgeSabe</td>
	          <td><a href="#">george@mainevent.co.za</a></td>
	          <td>George Sabe</td>
	          <td><input type="checkbox" class="ui-helper-hidden-accessible"></td>
	          <td>0123023923</td>
	          <td class="options-width"><a class="icon-1 info-tooltip" href=""></a> <a class="icon-2 info-tooltip" href=""></a> <a class="icon-3 info-tooltip" href=""></a> <a class="icon-4 info-tooltip" href=""></a> <a class="icon-5 info-tooltip" href=""></a> </td>
	        </tr>
	      </table>
	      <div align="right">
	        <table cellspacing="0" cellpadding="0" border="0" id="paging-table">
	          <tbody>
	            <tr>
	              <td><a class="page-far-left" href=""></a> <a class="page-left" href=""></a>
	                <div id="page-info">Page <strong>1</strong> / 15</div>
	                <a class="page-right" href=""></a> <a class="page-far-right" href=""></a> </td>
	            </tr>
	          </tbody>
	        </table>
	      </div>
	
	
	
	<div class="content-box">
	      <!-- Start Content Box -->
	      <div class="content-box-header">
	        <h3>User details</h3>
	        <ul class="content-box-tabs">
	          <li><a href="#tab1" class="default-tab">User details</a></li>
	          <!-- href must be unique and match the id of target div -->
	        </ul>
	        <div class="clear"></div>
	      </div>
	      <!-- End .content-box-header -->
	      <div class="content-box-content">
	        <div class="tab-content default-tab" id="tab1">
	          	<table cellpadding="0" cellspacing="0" border="0" width="80%" id="tblUserDetail">
		  	<tr>
				<th valign="top">Username:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
		  	<tr>
				<th valign="top">Password:</th>
				<td><input type="password" class="inp-form-error"></td>
				<td>
				<div class="error-left"></div>
				<div class="error-inner">This field is required.</div>
				</td>
			</tr>
			<tr>
				<th valign="top">Email:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">Fullname:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">Gender:</th>
				<td><input type="radio" value="male" name="gender"/> Male <input type="radio" value="Female" name="gender"/> Female</td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">Address:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">Date of birth:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top">Phone:</th>
				<td><input type="text" class="inp-form"></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top"></th>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<th valign="top"><input type="button" class="form-submit" value="">
					<input type="reset" class="form-reset" value=""></th>
				<td>
					
				</td>
				<td></td>
			</tr>
			
		  </table>
	        </div>
	        <!-- End #tab1 -->
	      </div>
	      <!-- End .content-box-content -->
	    </div>
		
		
		
		  
	    </div>
	  </div>
	  <!-- End #main-content -->
	</div>
</body>
</html>